<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>virtual-dom</title>
  <style>
    .container{
      background: #faa;
    }
  </style>
</head>
<body>
  <script src="./virtual-dom.js"></script>
  <script src="./mytemplate.js"></script>
  <script>
    mytemplate.eventHelper()
    var render = mytemplate.createRender(document.body)

    function myHello(count,render){
      function inc(){
        count++
        render()
      }
      var style = {
        background:'#000',
        color:'#fff'
      }
      return function(){
        return ['div',{style:style},
          ['h3','title'],
          ['button', {_click:inc},
            count ]]
        }
    }
    function container(render){
      var hello = myHello(7,render)
      return function(){
        return ['div.container',
        ['h1','i am h1'],
        hello]
      }
    }
    render(container(render))
  </script>
</body>
</html>